<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路: 1. 去除元素默认外边框【通配选择器】 设置背景颜色
			        2. product_card  设置样式  加内边距  边框设置颜色 加倒角  加阴影 内容居中 text-align
					3. 图片边框倒角 外边距 
					4. 小米su7文字  外边距
					5. 价格￥279999.00  文字大小
					6. 颜色  外边距  内边距*/
					#product_card{
						width: 280px;
						height: 540px;
						border: 1px solid gray;
						border-radius: 10px;
						padding: 10px;
						text-align: center;
						box-shadow: 1px 1px 1px 1px gray;
						background-color: #fffdfc;
					}
					img{
						border: 1px solid transparent;
						border-radius: 5px;
						text-align: center;
						margin: 0;
						
					}
					h3{
						text-align: center;
						
						
					}
					#price{
						color: #ee7c47;
						text-align: center;
						
						
					}
					#bottom{
						text-align: center;
						color: lightgray;
						
					}
					#a{
						color: lightgray;
						text-align: center;
						padding: 0 5px;
						
						
					}
					
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/微信图片_20241224104241.jpg" width="260" height="385" alt="su7">
			<h3>小米SU7</h3>
			<p id="price">￥279999.00</p>
			<p id="bottom">已有<span id="a">10万+</span>人评价</p>
		</div>
	</body>
</html>